<template>
   
    <div class="about-container">
        <div class="logo-container">
            <img src="../../public/logo3.jpg" alt="Logo" class="logo"/>
        </div>
        <div class="about-title">关于书来书往</div>
        <div class="about-content">
            书来书往是一个便捷的图书捐赠与借阅平台，旨在促进知识流转，让闲置图书焕发新生。我们致力于打造一个共享阅读的社区，让每一本书都能找到它的读者。
        </div>
        <div class="home-button-container">
            <van-button type="primary" class="home-button" @click="goToHome">返回首页</van-button>
        </div>
    </div>
    <div class="main-footer">成都市武侯区图书馆主办 & 九孔科技提供技术支持</div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const goBack = () => {
    router.push({ path: '/home' });
};

const goToHome = () => {
    router.push({ path: '/home' });
};
</script>

<style scoped lang="scss">
.about-container {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 160px);
    background-color: #f5f5f5;
}

.logo-container {
    margin-bottom: 2rem;
    margin-top: 40px;
    
    .logo {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 10px;
    }
}

.about-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #047857;
    margin-bottom: 1.5rem;
    text-align: center;
}

.about-content {
    font-size: 14px;
    line-height: 1.6;
    color: #959595;
    text-align: center;
    max-width: 500px;
    
}

.home-button-container {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.home-button {
    background-color: #059669;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
}

.main-footer {
    text-align: center;
    margin-top: .2rem;
    color: #ccc;
    font-size: .7rem;
    font-weight: lighter;
    padding-bottom: 1rem;
}
</style>